<template>
	<el-card shadow="0" >
		<!-- 查询条件-->
		<el-row :gutter="10">
			<el-col :span="6">
				<el-input placeholder="请输入事件名" v-model="queryInfo.title"></el-input>
			</el-col>
			<el-col :span="6">
				<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
			</el-col>
		</el-row>
		<div style="margin-top: 5px;">
			<el-col >
				<el-button  @click="openAddDialog()"
					type="primary" icon="el-icon-plus">新增</el-button>
			</el-col>
		</div>
		<el-table :data="tableData"  style="width: 100%;" >
			
			<el-table-column align="center" width="150" prop="title" label="事件标题" ></el-table-column>
			<el-table-column align="center" width="100" prop="eventType.name" label="类型" ></el-table-column>
			<el-table-column align="center" width="150" prop="describes" label="事件描述" ></el-table-column>
			<el-table-column align="center" width="200" prop="cover" label="封面图" >
				<template slot-scope="scope">
					<img :src="imgService+scope.row.cover" width="50" height="50" />
				</template>
			</el-table-column>
			<el-table-column align="center" width="120" prop="author" label="作者" ></el-table-column>
			<el-table-column align="center" width="200" prop="content" label="内容" ></el-table-column>
			<el-table-column align="center" prop="status" label="状态" :formatter="formaStatus"></el-table-column>
			<el-table-column align="center" width="180" prop="releseDate" :formatter="formatterTime" label="发布日期" ></el-table-column>
			
			<el-table-column align="center"
			      fixed="right"
			      label="操作"
			      width="180">
			     <template slot-scope="scope">
					
			     	<el-button size="mini" @click="openUpdateDialog(scope.row.id)">编辑</el-button>
			     	<el-button size="mini" type="danger" @click="deleteEvent(scope.row.id)">删除</el-button>
			     </template>
			    </el-table-column>
		</el-table>
		<div class="block">
		    <el-pagination
		      @size-change="handleSizeChange"
		      @current-change="handleCurrentChange"
		      :current-page="queryInfo.pageNum"
		      :page-sizes="[4, 6, 8, 10]"
		      :page-size="2"
		      layout="total, sizes, prev, pager, next, jumper"
		      :total="total">
		    </el-pagination>
		</div>
		<AddEvent ref="AddEvent"></AddEvent>
		<UpdateEvent ref="UpdateEvent"></UpdateEvent>
	</el-card>
	 
</template>

<script>
	import AddEvent from './AddEvent.vue';
	import UpdateEvent from './UpdateEvent.vue';
	export default{
		components:{
			AddEvent,
			UpdateEvent,
		},
		data() {
			return {
			   tableData: [],
			   imgService:this.$imgService,
			   total:0,
			   queryInfo:{
			   	pageNum:1,
			   	pageSize:4,
			   	title:"",
			   }
			}
		},
		methods: {
			
			formatterTime(row,column,cellValue,index){
				var date = new Date(cellValue);
				return date.toLocaleString();
			},
			formaStatus(row, column){
				if (row.status == 1) {
					return "正在审核";
				} else if (row.status == 2) {
					return "已审核";
				} else if (row.status == 3) {
					return "驳回";
				}
			},
			handleSizeChange(val) {
				this.queryInfo.pageSize=val;
				this.queryInfo.pageNum=1;
				this.findEvents();
			},
			handleCurrentChange(val) {
				this.queryInfo.pageNum=val;
				this.findEvents();
			},
			search(){
				this.queryInfo.pageNum=1;
				this.findEvents();
			},
			//打开新增对话框
			openAddDialog() {
				//让新增对话框组件显示出来,  在父组件中调用子组件的数据
				this.$refs.AddEvent.dialogVisible = true;
			},
			//打开修改组件
			openUpdateDialog(id) {
				console.log(id);
				this.$refs.UpdateEvent.dialogVisible = true;
				this.$refs.UpdateEvent.findEventById(id);
			},
			deleteEvent(id){
				this.$confirm('您确定要删除吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$http.delete("/admin/eventCtl/deleteEventById/" + id).then((res)=> {
						if(res.data.code == 200){
							this.$message({
							message: '删除成功',
							type: 'success'
							});
							this.$router.go();
						}
						if(resp.data.code == 201){
							this.$message({
								message: resp.data.message,
								type:'warning'
							})
						}
					})
				});
			},
			findEvents(){
				//自动向后端加载角色列表数据
				this.$http.post("admin/eventCtl/findEvents",this.queryInfo).then((resp)=>{
					console.log(resp.data);
					this.tableData = resp.data.data;
					this.total = resp.data.total;
				})
			},
		}, 
		mounted(){
			 //自动向后端加载角色列表数据
			 this.findEvents();
		}
		
	}
</script>

<style>
</style>
